<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Change query root</title>
    <link rel="icon" href="../favicon.ico"/>

    <!-- Add Popoto default CSS styles -->
    <link rel="stylesheet" href="../node_modules/popoto/dist/popoto.min.css">
    <link rel="stylesheet" href="../shared.css">

    <style>
        .ppt-container-graph {
            background-color: #22252a;
            height: 600px;
            padding: 0 0 0;
            border-bottom-right-radius: 5px 5px;
            border-bottom-left-radius: 5px 5px;
            overflow: hidden;
        }
    </style>
</head>
<body class="ppt-body">

<section class="ppt-section-main">
    <div class="ppt-section-header">
        <span class="ppt-header-span">Graph</span> change random query root
    </div>

    <div style="text-align: center; padding: 15px; background-color: #444951;">
        <button id="randomize" style="height: 25px">Change query root node</button>
    </div>

    <div class="ppt-container-graph">
        <nav class="ppt-taxo-nav">
            <div id="popoto-taxonomy">
                <span class="ppt-header-span">Taxonomies:</span><br><br>
            </div>
        </nav>
        <div id="popoto-graph" class="ppt-div-graph">
            <!-- Graph will be generated here-->
        </div>
    </div>

    <div id="popoto-cypher" class="ppt-container-cypher">
        <!-- Cypher query viewer will be generated here -->
    </div>

    <div class="ppt-section-header">
        <!-- The total results count is updated with a listener defined below -->
        RESULTS <span id="result-total-count" class="ppt-count"></span>
    </div>

    <div id="popoto-results" class="ppt-container-results">
        <!-- Results will be generated here -->
    </div>

</section>

<!-- Required scripts -->
<script src="../shared.js" charset="utf-8"></script>
<script src="../node_modules/d3/dist/d3.min.js" charset="utf-8"></script>
<script src="../node_modules/neo4j-driver-lite/lib/browser/neo4j-lite-web.min.js" charset="utf-8"></script>
<script src="../node_modules/popoto/dist/popoto.min.js" charset="utf-8"></script>

<script>

    var driver = neo4j.driver(
        "neo4j+s://dff437fa.databases.neo4j.io",
        neo4j.auth.basic("popoto", "popotopassword"),
    );

    popoto.runner.DRIVER = driver

    popoto.provider.node.Provider = {
        "Person": {
            "returnAttributes": ["name", "born"],
            "constraintAttribute": "name"
        },
        "Movie": {
            "returnAttributes": ["title", "released", "tagline"],
            "constraintAttribute": "title"
        }
    };

    /**
     * Here a listener is used to retrieve the total results count and update the page accordingly.
     * This listener will be called on every graph modification.
     */
    popoto.result.onTotalResultCount(function (count) {
        document.getElementById("result-total-count").innerHTML = "(" + count + ")";
    });

    function changeQueryRoot() {

        // Get current graph schema
        var graph = popoto.graph.getSchema();

        // Change graph root to a random relation around actual root node
        if (graph.hasOwnProperty("rel") && graph.rel.length > 0) {

            // Remove a random branch from actual root node in graph
            var removedRandomBranch = graph.rel.splice(Math.floor(Math.random() * graph.rel.length), 1)[0];

            // Set the first target of thi branch as newRoot
            var newRoot = removedRandomBranch.target;

            // Add previously pruned graph as a branch and change the isReverse property if crossed in reverse order
            if (newRoot.rel === undefined) {
                newRoot.rel = []
            }
            newRoot.rel.push(
                {
                    label: removedRandomBranch.label,
                    isReverse: removedRandomBranch.isReverse !== true,
                    target: graph
                }
            );

            // Reset graph
            popoto.graph.mainLabel = newRoot;
            popoto.tools.reset();
        }
    }

    d3.select("#randomize").on("click", changeQueryRoot);

    driver.verifyConnectivity().then(function () {

        popoto.start({
            "label": "Person",
            "rel": [
                {"label": "ACTED_IN", "target": {"label": "Movie"}},
                {"label": "DIRECTED", "target": {"label": "Movie"}},
                {"label": "PRODUCED", "target": {"label": "Movie"}},
                {"label": "WROTE", "target": {"label": "Movie"}},
                {"label": "REVIEWED", "target": {"label": "Movie"}},
                {"label": "FOLLOWS", "target": {"label": "Person"}}
            ]
        });
    }).catch(function (error) {
        document.getElementById("modal").style.display = "block";
        document.getElementById("error-content").innerText = error;
        console.error(error)
    })

</script>
</body>
</html>
